<template>
  <gui-page ref="pageRef" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">职业现状</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column">
        <!-- 搜索框 -->
        <view class="gui-flex gui-bg-white gui-dark-bg-level-3 gui-border-box" style="padding-bottom: 10rpx">
          <gui-search
            class="gui-flex1"
            :custom-class="['gui-margin-x', 'gui-bg-gray']"
            placeholder="请输入职位名称"
            @clear="search"
            @confirm="search"
          />
          <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
            <button class="gui-button-mini gui-primary-border-color gui-border-radius-full" :plain="true" type="default" @tap.stop="search">
              <text class="gui-icons gui-primary-color gui-button-text-mini">&#xe604; 搜索</text>
            </button>
          </view>
        </view>
        <!-- 主体区域 -->
        <view class="gui-flex gui-flex1 gui-relative gui-border-t">
          <!-- 左侧分类列表 -->
          <scroll-view
            class="gui-cate-left gui-bg-white gui-dark-bg-level-3 gui-absolute-full"
            :scroll-into-view="leftTo"
            :scroll-with-animation="true"
            :scroll-y="true"
            :show-scrollbar="false"
          >
            <view
              v-for="(item, index) in mainCate"
              :id="'cate' + item.cateid"
              :key="index"
              class="gui-cate-left-item gui-border-box"
              :class="[currentCateIndex == item.cateid ? 'gui-cate-left-current' : '']"
            >
              <text
                class="gui-border-l gui-ellipsis gui-overflow-hidden gui-nowrap"
                :class="['gui-cate-left-item-title', 'gui-block', currentCateIndex == item.cateid ? 'gui-cate-left-current' : '']"
                :data-cateid="item.cateid"
                style="padding-left: 15rpx"
                @tap="changCate"
              >
                {{ item.name }}
              </text>
            </view>
          </scroll-view>
          <!-- 右侧列表 -->
          <scroll-view
            class="gui-cate-right gui-absolute-full gui-bg-white"
            :scroll-into-view="productListTo"
            :scroll-with-animation="true"
            :scroll-y="true"
            :show-scrollbar="false"
            @scroll="rscroll"
          >
            <!-- 循环展示分类及分类对应的产品列表 -->
            <view v-for="(cate, idx) in mainCate" :id="'productList' + cate.cateid" :key="idx" class="gui-margin-top-small">
              <text class="gui-block gui-h6 gui-bold gui-cate-right-title gui-margin-x">{{ cate.name }}</text>
              <!-- 循环展示产品 -->
              <view class="gui-grid gui-margin-x">
                <gui-tags
                  v-for="(product, pidx) in cate.products"
                  :key="pidx"
                  :custom-class="['gui-bg-gray', 'gui-color-black', 'gui-padding-small', 'gui-grid-item', 'gui-cate-product-list']"
                  :data-parentid="cate.cateid"
                  :size="26"
                  :text="product.name"
                  @tapme="handleClick(product)"
                />
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
const mainHeight = ref<number>(300)
const leftTo = ref<string>('cate')
const isLeftTap = ref<boolean>(false)
const mainCate = ref<Array<any>>([
  {
    cateid: 1,
    name: '分类 · 0112316526565',
    products: [
      { id: 11, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 12, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 13, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 14, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 15, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 16, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 2,
    name: '分类 · 02',
    products: [
      { id: 21, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 22, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 23, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 24, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 25, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 26, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 3,
    name: '分类 · 03',
    products: [
      { id: 31, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 32, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 33, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 34, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 35, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 36, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 4,
    name: '分类 · 04',
    products: [
      { id: 41, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 42, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 43, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 44, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 45, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 46, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 5,
    name: '分类 · 05',
    products: [
      { id: 51, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 52, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 53, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 54, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 55, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 56, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 6,
    name: '分类 · 06',
    products: [
      { id: 61, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 62, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 63, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 64, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 65, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 66, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 7,
    name: '分类 · 07',
    products: [
      { id: 71, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 72, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 73, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 74, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 75, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 76, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 8,
    name: '分类 · 08',
    products: [
      { id: 81, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 82, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 83, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 84, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 85, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 86, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 9,
    name: '分类 · 09',
    products: [
      { id: 91, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 92, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 93, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 94, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 95, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 96, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 10,
    name: '分类 · 10',
    products: [
      { id: 101, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 102, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 103, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 104, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 105, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 106, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 11,
    name: '分类 · 11',
    products: [
      { id: 111, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 112, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 113, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 114, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 115, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 116, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
  {
    cateid: 12,
    name: '分类 · 12',
    products: [
      { id: 121, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/28.png', price: 12.88 },
      { id: 122, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/29.png', price: 12.88 },
      { id: 123, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png', price: 12.88 },
      { id: 124, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/31.png', price: 12.88 },
      { id: 125, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/34.png', price: 12.88 },
      { id: 126, name: '标题', img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/37.png', price: 12.88 },
    ],
  },
])
const currentCateIndex = ref<number>(1)
const scrollTimer = ref<any>(null)
const productListTo = ref<string>('')

const changCate = (e: any) => {
  isLeftTap.value = true
  const cateid = e.currentTarget.dataset.cateid
  currentCateIndex.value = cateid
  if (cateid == 1) {
    productListTo.value = 'productList2'
    nextTick(() => {
      productListTo.value = `productList${cateid}`
    })
  } else {
    productListTo.value = `productList${cateid}`
  }
  setTimeout(() => {
    isLeftTap.value = false
  }, 3000)
}
const rscroll = (e: any) => {
  if (isLeftTap.value) {
    return
  }
  if (scrollTimer.value != null) {
    clearTimeout(scrollTimer.value)
  }
  scrollTimer.value = setTimeout(() => {
    getIndex()
  }, 100)
}
// 动态识别分类激活
const getIndex = () => {
  const query = uni.createSelectorQuery()
  query.selectAll('.gui-cate-product-list').boundingClientRect()
  query.selectViewport().scrollOffset()
  query.exec((res) => {
    const products = res[0]
    for (let i = 0; i < products.length; i++) {
      if (products[i].top > 0 && products[i].top >= mainHeight.value / 2) {
        currentCateIndex.value = products[i].dataset.parentid
        leftTo.value = `cate${products[i].dataset.parentid}`
        break
      }
    }
  })
}
// 搜索
const search = (e: any) => {
  const kwd = e
  let searchIndex = -1
  let index = 0
  for (const k in mainCate.value) {
    for (let i = 0; i < mainCate.value[k].products.length; i++) {
      if (mainCate.value[k].products[i].name.indexOf(kwd) != -1) {
        searchIndex = mainCate.value[k].products[i].id
        break
      }
      index++
    }
    if (searchIndex != -1) {
      break
    }
  }
  if (searchIndex != -1) {
    productListTo.value = `products${searchIndex}`
  }
}

const handleClick = (e: any) => {
  console.log(e)
  uni.navigateTo({
    url: `./detail/index?data=${JSON.stringify(e)}`,
  })
}
onLoad(() => {
  // 获取页面主体高度从而得出主体高度
  // graceJS.getRefs('pageRef', this, 0, (ref: any) => {
  //   ref.getDomSize('guiPageBody', (e: any) => {
  //     // 02. 导航的高度
  //     // 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
  //     mainHeight.value = e.height - uni.upx2px(110)
  //     setTimeout(() => {
  //       pageLoading.value = false
  //     }, 1000)
  //   })
  // })
})
</script>
<style scoped>
.header-search {
  padding: 20rpx 80rpx;
  width: 750rpx;
}
.gui-cate-left {
  width: 200rpx;
}
.gui-cate-right {
  width: 520rpx;
  left: 230rpx;
}
.gui-cate-left-item {
  height: 100rpx;
  padding: 35rpx 0;
  font-size: 26rpx;
}
.gui-cate-left-item-title {
  line-height: 32rpx;
  font-size: 28rpx;
  border-left-width: 8rpx;
  text-align: center;
}
.gui-cate-left-current {
  border-color: #ff0036 !important;
  background-color: #f6f7f8;
  color: #ff0036;
  font-weight: bold;
}
.gui-cate-right-title {
  line-height: 80rpx;
}
.gui-cate-product-list {
  margin-bottom: 30rpx;
  margin-right: 25rpx;
}
.gui-cate-pimg {
  width: 150rpx;
}
.gui-cate-pbody {
  margin-left: 30rpx;
  width: 100rpx;
  flex: 1;
  padding-top: -20rpx;
}
.gui-cate-price {
  font-size: 32rpx;
  line-height: 60rpx;
}

/* 深色模式 */
/* #ifndef APP-NVUE */
@media (prefers-color-scheme: dark) {
  .gui-cate-left-current {
    background-color: #333333;
  }
}
/* #endif */
</style>
